// 添加商品页面组件
<template>
  <div>
    <!-- 面包屑导航区 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/mangerHome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品列表</el-breadcrumb-item>
      <el-breadcrumb-item>添加商品</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 顶部提示 -->
    <el-alert title="添加商品" type="info" center show-icon></el-alert>
    <!-- 步骤条 -->
    <el-steps :active="active-'0'" align-center finish-status="success">
      <el-step title="基本信息"></el-step>
      <el-step title="商品参数"></el-step>
      <el-step title="商品属性"></el-step>
      <el-step title="商品图片"></el-step>
      <el-step title="商品内容"></el-step>
      <el-step title="完成"></el-step>
    </el-steps>
    <!-- 标签页 外面包裹一个表单 -->
    <el-form :model="addGoodsForm" :rules="addGoodsFormRules" ref="addGoodsFormRef" label-width="100px" label-position="top">
      <el-tabs v-model="active" tab-position="left" :before-leave="beforeLeave" @tab-click="tabClicked"> <!-- before-leave标签页切换绑定的函数  tab-click标签页触发时调用此函数-->
        <el-tab-pane label="基本信息" name="0">
          <el-form-item label="商品名称" prop="goods_name">
            <el-input v-model="addGoodsForm.goods_name"></el-input>
          </el-form-item>
          <el-form-item label="商品价格（元）" prop="goods_price">
            <el-input v-model="addGoodsForm.goods_price" type="number"></el-input>
          </el-form-item>
          <el-form-item label="商品重量（kg）" prop="goods_weight">
            <el-input v-model="addGoodsForm.goods_weight" type="number"></el-input>
          </el-form-item>
          <el-form-item label="商品数量" prop="goods_number">
            <el-input v-model="addGoodsForm.goods_number" type="number"></el-input>
          </el-form-item>
          <el-form-item label="商品分类" prop="goods_cat">
            <!-- 级联框  options指定数据源-->
            <el-cascader v-model="addGoodsForm.goods_cat" :options="cateList" expand-trigger="hover" 
             :props="cascaderProps" clearable change-on-select @change="handleChange"></el-cascader>
          </el-form-item>
        </el-tab-pane>
        <el-tab-pane label="商品参数" name="1">
          <el-form-item :label="item.attr_name" v-for="(item,i) in manyDate" :key="i">
            <el-checkbox-group v-model="item.attr_vals">
              <el-checkbox :label="cb" v-for="(cb,ic) in item.attr_vals" :key="ic" border></el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-tab-pane>
        <el-tab-pane label="商品属性" name="2">
          <el-form-item :label="item.attr_name" v-for="(item,i) in onlyDate" :key="i">
              <el-input v-model="item.attr_vals"></el-input>
          </el-form-item>
        </el-tab-pane>
        <el-tab-pane label="商品图片" name="3">
          <!-- 向后台上传图片 action访问后台的完整api接口  on-preview处理图片预览 on-remove处理删除图片操作-->
          <!-- 需要自行加上请求头部分 添加headers属性  on-success监听上传成功事件-->
          <el-upload :action="updateUrl" :on-preview="handlePreview"
          :on-remove="handleRemove" list-type="picture" :headers="headersObj" :on-success="handlSuccess">
            <el-button size="small" type="primary">点击上传<i class="el-icon-upload el-icon--right"></i></el-button>
          </el-upload>
        </el-tab-pane>
        <el-tab-pane label="商品内容" name="4">
          <!-- 富文本编辑器 -->
          <quill-editor class="quileditor" v-model="addGoodsForm.goods_introduce"></quill-editor>
          <el-button type="primary" class="addbtn" @click="addGoods">添加商品</el-button>
        </el-tab-pane>
      </el-tabs>
    </el-form>
    <!-- 图片预览弹出来的对话框 -->
      <el-dialog title="图片预览" :visible.sync="preViewDialogVisible" width="50%">
        <img :src="previewUrl" class="previewImg">
      </el-dialog>
  </div>
</template>

<script>
import _ from 'lodash'   //需要用到里面提供的深拷贝
export default {
  data() {
    return {
      active:'0',     //步骤条激活的index值  这是字符串 步骤条中数字 在步骤条中通过减法实现字符串变数字
      addGoodsForm:{   //添加商品 表单绑定的数据
        goods_name:'',
        goods_cat:[],   //级联选择器选择时绑定的数组
        goods_price:0,
        goods_number:0,
        goods_weight:0,
        pics:[],     //保存上传图片的临时路径的数组
        goods_introduce:'',    //商品描述
        attrs:[],    //存放动态参数和静态属性
      },
      addGoodsFormRules:{   //表单绑定的验证规则
        goods_name:[
          { required: true, message: '请输入商品名称', trigger: 'blur' },
        ],
        goods_price:[
          { required: true, message: '请输入商品价格', trigger: 'blur' },
        ],
        goods_number:[
          { required: true, message: '请输入商品数量', trigger: 'blur' },
        ],
        goods_weight:[
          { required: true, message: '请输入商品重量', trigger: 'blur' },
        ],
        goods_cat:[
          { required: true, message: '请选择商品分类', trigger: 'blur' },
        ],
      },
      cateList:[],    //保存访问到的后台数据 商品分类数据//级联选择器选择时绑定的数组
      cascaderProps:{    //指定级联选择器的配置对象
        value	:'cat_id',
        label:'cat_name',
        children:'children'
      },
      manyDate:[],     //保存后台访问到的动态参数数据
      onlyDate:[],     //保存后台访问到的静态属性数据
      updateUrl:'http://127.0.0.1:8888/api/private/v1/upload',    //上传图片时访问的完整后台api接口路径
      headersObj:{ Authorization:window.sessionStorage.getItem('token') },    //上传图片时指定的请求头部分 需要获得浏览器提供的token 我们将它保存在了本地
      previewUrl:'',    //图片预览时保存的真实路径
      preViewDialogVisible:false,    //图片预览对话框显示隐藏
    }
  },
  created() {
    this.getCateList()
  },
  methods: {
    async getCateList(){     //获取商品分类列表数据
      const {data:res} = await this.$http.get('categories')
      //   console.log(res)
      if(res.meta.status !== 200){   //请求失败
        return this.$message.error('访问后台数据失败，无法获取到商品分类列表！')
      }
      // 请求成功
      this.cateList = res.data
      //   console.log(this.cateList)
    },
    handleChange(){   //级联选择器发生改变时触发  只允许选择第三级
    //   console.log(this.addGoodsForm.goods_cat)
      if(this.addGoodsForm.goods_cat.length !== 3){
          this.addGoodsForm.goods_cat = []   //清空数组
      }
    },
    beforeLeave(newActiveName,oldActiveName){    //标签也发生切换的时候绑定的函数
      //接收到两个参数 newActiveName指要去到的标签页的name值， oldActiveName指要离开的标签页的name值
      //当在第一个标页签并且没有选择商品分类时 不允许标签页切换
      if(oldActiveName === '0' && this.addGoodsForm.goods_cat.length !==3){
          this.$message.error('请先完成基础信息填写！')
          return false    //不允许切换标签页
      }
    },
    async tabClicked(){    //标签页被触发时调用
    //   console.log(this.active)
      if(this.active === '1'){   //商品参数标签页被触发
        // 获取动态参数
        const {data:res} = await this.$http.get(`categories/${this.cateId}/attributes`,{params:{sel:'many'}})
        // console.log(res)
        if(res.meta.status !== 200){
            return this.$message.error('访问后台失败，无法获取到商品的动态参数！')
        }
        // 请求成功
        res.data.forEach(item=>{
          //循环数组里的每一项中的attr_vals，是一个字符串，需要将他分割成数组  还有判断这个字符串是否为空
          item.attr_vals = item.attr_vals.length === 0 ? [] : item.attr_vals.split(' ')
        })
        // console.log(res.data)
        this.manyDate = res.data
      }
      else if(this.active === '2'){  //商品属性标签被触发
        // 获取静态
        const {data:res} = await this.$http.get(`categories/${this.cateId}/attributes`,{params:{sel:'only'}})
        // console.log(res)
        if(res.meta.status !== 200){
            return this.$message.error('访问后台失败，无法获取到商品的静态属性！')
        }
        // 请求成功
        // console.log(res.data)
        this.onlyDate = res.data
      }
    },
    handlePreview(file){   //处理图片预览效果
      //  console.log(file)
       //获取到返回数据中图片真正的路径 url
       const preUrl = file.response.data.url
       this.previewUrl = preUrl    //保存图片路径
       this.preViewDialogVisible = true   //显示对话框

    },
    handleRemove(file){   //处理图片删除操作
      // 获取到返回数据file中想要删除图片的临时路径tmp_path
      // 在保存的数组pics中找到对应index移除 通过splice移除
      // console.log(file)
      const filePath = file.response.data.tmp_path   //获取到的图片临时路径
      const index = this.addGoodsForm.pics.findIndex(i =>{
        i.pic === filePath    //调用findIndex函数找到对应的索引值
      })
      this.addGoodsForm.pics.splice(index,1)   //删除
      // console.log(this.addGoodsForm.pics)
    },
    handlSuccess(respond){   //监听图片上传成功事件 respond返回的数据
      // console.log(respond)
      // 上传成功 保存返回数据respondzhong的data中的tmp_path在pics数组中
      this.addGoodsForm.pics.push({pic:respond.data.tmp_path})
      //  console.log(this.addGoodsForm.pics)
    },
    addGoods(){    //添加商品
      this.$refs.addGoodsFormRef.validate(async vali=>{   //表单预验证
        if(!vali){   //预验证失败
          return this.$message.error('请完成必填的表单项！')
        }
        // 预验证成功 处理数据
        const form = _.cloneDeep(this.addGoodsForm)  //对表单深拷贝一份
        form.goods_cat = form.goods_cat.join(',')   //将数组变成逗号分隔的字符串
        // 处理动态参数
        this.manyDate.forEach(item =>{
          const newInfo = {attr_id:item.attr_id,attr_value:item.attr_vals.join(' ')}
          this.addGoodsForm.attrs.push(newInfo)
        })
        // 处理静态属性
        this.onlyDate.forEach(item =>{
          const newInfo = {attr_id:item.attr_id,attr_value:item.attr_vals}
          this.addGoodsForm.attrs.push(newInfo)
        })
        form.attrs = this.addGoodsForm.attrs   //赋值给要传递给后台的form上
        // console.log(form)
        // 发起请求
        const {data:res} = await this.$http.post('goods',form)
        console.log(res)
        if(res.meta.status !== 201){
          return this.$message.error('访问后台数据失败，无法添加商品！')
        }
        this.$message.success('添加商品成功！')
        this.$router.push('/goods')
      })
    }
  },
  computed:{    //计算属性
    cateId(){    //计算得到分类参数的id
     if(this.addGoodsForm.goods_cat.length === 3){
        return this.addGoodsForm.goods_cat[2]
     }
    }
  }

}
</script>

<style scoped>
.el-cascader{
    width: 100%;
}
.el-checkbox{
    margin: 0 2px 0 0;
}
.previewImg{
  width: 100%;
}
.addbtn{
  margin-top: 15px;
}
</style>